<!--下拉框-->
<template>
  <label @click.stop>
    <el-checkbox-group v-model="valueModel" @change="handlerChange">
      <el-checkbox v-for="(item, idx) in options_" :key="idx" :label="item.value">{{ item.label }}</el-checkbox>
    </el-checkbox-group>
    <span v-if="validator" v-show="validator.valid === false" class="text-red">{{ validator.message }}</span>
  </label>
</template>

<script>
/* eslint-disable */
import Layers from "@/lang/layers";
import DictionaryProvider from "../provider/dictionary-provider";

/**
 * 行内下拉框，多加一层，主要是为了格式化入参
 */
export default {
    name: 'TableSelect'
    , props: {
        // vue行级数据
        row: {type: Object}
        // 值字段名
        , property: {type: String}
        // 值字段名
        , value: {type: Array}
        //值变化回调，返回数据变化之后的行对象
        , change: {type: Function}
        // 数据字典
        , options: {type: Array, default: undefined}
    }, data() {
        return {
            // 值字段名
            valueModel: undefined
            // 数据字典
            , options_: undefined
            // 数据验证清空
            , validator: {
                // 是否有效
                valid: undefined
                // 错误信息
                , message: ''
            }
        }
    }, created() {
        // 必须在数据加载前创建 $validators 对象
        if (this.row.$validators) {
            const $valid = this.row.$validators;
            this.validator = $valid[this.property];
        }
    }, watch: {
        value: {
            handler: function (val) {
                this.valueModel = val;
            }
            , immediate: true
        }
        , options: {
            handler: function (val) {
                if (Layers.isNotBlank(val)) {
                    DictionaryProvider(val).then(dic => this.opts = dic.list);
                } else {
                    this.opts = [];
                }
            }
            , immediate: true
        }
    }, methods: {
        /**
         * 下拉框值改变事件
         *
         * @param val 值
         */
        handlerChange: function (val) {
            try {
                let name = this.property;
                // 返回 row 对象，修改成功，直接修改 row 的字段，而不需要刷新整个表格
                this.change('$edit', this.row, {field: name, value: val})
            } catch (e) {
                // rollback
                this.valueModel = this.value;
            }
        }
    }
}
</script>
